<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单验证示例</title>
    <style>
        .error-message {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
        <label for="myInput">输入内容</label>
        <input type="text" name="myInput" id="myInput">
        <div id="error" class="error-message">输入框不能为空！</div>
        <button type="button" onclick="validateInput()">提交</button>

    <script type="text/javascript">
        function validateInput() {
            const input = document.getElementById('myInput');
            const errorDiv = document.getElementById('error');

            if (input.value === '') {
                errorDiv.style.display = 'block';
                errorDiv.innerText = '输入框不能为空！'; // 重置提示信息
            } else if (input.value.length < 5) {
                errorDiv.style.display = 'block';
                errorDiv.innerText = '用户格式不对';
            } else {
                errorDiv.style.display = 'none';
                alert('用户名提交成功！');
            }
        }
    </script>
</body>
</html>